<div class="border border-primary rounded p-2">
  <div class="m-0 p-0 container-fluid d-flex">
    <div>
      <h4>Reports: {{ engagement.reports|length }}</h4>
    </div>
    <div class='ml-auto'>
      {% include 'snippets/statusButtonGroup.html' %}
      {% include 'snippets/textButton.html' with name='New Report' id='reportCreate' type='plus' class='btn-primary' %}
    </div>
  </div>
  <table class="writehat-table container-fluid table-light table-striped table-hover overflow-auto paginate writehat-reports" id="reports">
    <thead>
      <th></th>
      <tr>
        <th><strong>Name</strong></th>
        <th><strong>Components</strong></th>
        <th><strong>Created</strong></th>
        <th><strong>Modified</strong></th>
        <th><strong>Status</strong></th>
        <th></th>
      </tr>
    </thead>
    <tbody class="text-nowrap">
      {% for report in engagement.reports|dictsortreversed:"modifiedDate" %}
        <tr class="report-row" report-id="{{ report.id }}" report-name="{{ report.name }}">
          <td><a href="/engagements/report/{{ report.id }}/edit">{{ report.name }}</a></td>
          <td><a href="/engagements/report/{{ report.id }}/edit">{{ report.numComponents }}</a></td>
          <td><a href="/engagements/report/{{ report.id }}/edit">{{ report.createdDate }}</a></td>
          <td><a href="/engagements/report/{{ report.id }}/edit">{{ report.modifiedDate }}</a></td>
          <td><a href="/engagements/report/{{ report.id }}/edit">{{ report.status|title }}</a></td>
          <td>
            <div class="floating float-right vertical-align-center mt-1">
              {% include 'snippets/smallButton.html' with title='Generate PDF' type='file-pdf' class='reportGeneratePDF engagement-reports text-white' attrs='style="border: 2px solid var(--danger)"' %}
              {% include 'snippets/smallButton.html' with title='Generate HTML' type='file-code' class='reportGenerateHTML engagement-reports text-white' attrs='style="border: 2px solid var(--warning)"' %}
              {% include 'snippets/smallButton.html' with title='Clone Report' type='copy' class='reportClone text-white' %}
              {% include 'snippets/smallButton.html' with title='Edit Report' type='pen' class='reportEdit text-dark' %}
              {% include 'snippets/smallButton.html' with title='Delete Report' type='times-circle' class='reportDelete text-danger' %}
            </div>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
